<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeUnmount } from "vue";
import short from './short.vue'
import middle from './middle.vue'
import Long from './Long.vue'
import Sortable from 'sortablejs';
onMounted(() => {
    initSort()
})

const tabs = {
    short,
    Long,
    middle
}



const initSort = () => {
    const table = document.querySelectorAll(".dragAndDropSort");
    console.log(table)
    Sortable.create(table[0] as HTMLElement, {

        group: 'shared',
        animation: 150,
        ghostClass: 'sortable-ghost', //拖拽样式
        // easing: 'cubic-bezier(1, 0, 0, 1)',
        // onStart: (item: any) => {
        //   console.log(item);
        // },

        // 结束拖动事件
        onEnd: (item: any) => {
            console.log(item);

            setNodeSort(item.oldIndex, item.newIndex)
        },
    })
}
let list = ref<string[]>(['Long', "middle", "middle", 'short', 'short', 'short'])
let list1 = ref<string[]>(['Long', "middle", "middle", 'short', 'short', 'short'])


//获取值
let order = localStorage.getItem('order')

if (order) {
    const orderlist = order.split(',')
    list.value = JSON.parse(JSON.stringify(orderlist));
    list1.value = orderlist;

}
onBeforeUnmount(() => {
    let arr = list.value.join()

    localStorage.setItem('order', arr)
})
const setNodeSort = (oldI: number, newI: number) => {
    console.log(JSON.parse(JSON.stringify(list.value)))
    let [a] = list.value.splice(oldI, 1)
    console.log([a])
    list.value.splice(newI, 0, a)
    console.log(JSON.parse(JSON.stringify(list.value)))
}
</script>
<template>
    <div class="dragAndDropSort">

        <component v-for="(item, index ) in list1" :key='index' :is="tabs[item as `short` | `Long` | `middle`]">{{ item }}</component>

    </div>
</template>

<style scoped lang="scss">
.dragAndDropSort {
    display: flex;
    flex-wrap: wrap;

    // width: 100%;
    // height: 50%;
    // background-color: #fff;
    .item {
        height: 100px;
        width: 100%;
    }

}
</style>
